﻿@model dynamic

@{
    Layout = null;
}

<!DOCTYPE html>

<html>  
    <head>  
        <title>Raphael Play</title>  
        <script type="text/javascript" src="/scripts/raphael.js"></script>  
        <style type="text/css">  
            #canvas_container {  
                width: 500px;
                height: 500px;
                align: center;
                border1: 1px solid #aaa;  
            }  
        </style>  
        <script>
            window.onload = function () {
                var paper = new Raphael(document.getElementById('canvas_container'), 500, 500);
                var dx = 10;
                var dx2 = dx / 2;
                var dy = 10;
                var dy2 = dy/2;

                function drawGrid() {
                    var y0 = 0;
                    var y1 = paper.height;
                    var s = '';
                    for (var x = 0; x <= paper.width; x += dx) {
                        s += 'M ' + x + ' ' + y0 + ' L ' + x + ' ' + y1 + ' ';
                    }
                    
                    var x0 = 0;
                    var x1 = paper.width;
                    for (var y = 0; y <= paper.height; y += dy) {
                        s += 'M ' + x0 + ' ' + y + ' L ' + x1 + ' ' + y + ' ';
                    }
                    var path = paper.path(s);
                    path.attr("stroke-width", 1);
                    path.attr("opacity", 0.25);
                }

                function drawZOrderRoot() {
                    var s = 'M ' + (dx/2) + ' ' + (dy/2) + ' ';
                    s = drawZOrderN(0, 0, s, 16);


                    var path = paper.path(s);
                    path.attr("stroke-width", 1);
                }


                function drawZOrderN(x, y, s, n) {
                    if (n == 2) {
                        s = drawZOrder(x, y, s);
                        s = drawZOrder(x + dx * n, y, s);
                        s = drawZOrder(x, y + dy * n, s);
                        s = drawZOrder(x + dx * n, y + dy * n, s);
                    } else {
                        s = drawZOrderN(x, y, s, n/2);
                        s = drawZOrderN(x + dx * n, y, s, n/2);
                        s = drawZOrderN(x, y + dy * n, s, n/2);
                        s = drawZOrderN(x + dx * n, y + dy * n, s, n/2);
                    }
                    return s;
                }


                function drawZOrder(x, y, s) {
                    s += 'L ' + (x + dx2) + ' ' + (y + dy2) + ' ';
                    s += 'L ' + (x + dx + dx2) + ' ' + (y + dy2) + ' ';
                    s += 'L ' + (x + dx2) + ' ' + (y + dy + dy2) + ' ';
                    s += 'L ' + (x + dx + dx2) + ' ' + (y + dy + dy2) + ' ';
                    return s;
                }


                function drawHilbertRoot() {
                    var s = 'M ' + (dx / 2) + ' ' + (dy / 2) + ' ';
                    s = drawHilbertN(0, 0, s, 2);


                    var path = paper.path(s);
                    path.attr("stroke-width", 1);
                }


                function drawHilbertN(x, y, s, n) {
                    if (n == 2) {
                        s = drawHilbert(x, y, s);
                        s = drawHilbert(x + dx * n, y, s);
                        s = drawHilbert(x, y + dy * n, s);
                        s = drawHilbert(x + dx * n, y + dy * n, s);
                    } else {
                        s = drawHilbertN(x, y, s, n / 2);
                        s = drawHilbertN(x + dx * n, y, s, n / 2);
                        s = drawHilbertN(x, y + dy * n, s, n / 2);
                        s = drawHilbertN(x + dx * n, y + dy * n, s, n / 2);
                    }
                    return s;
                }

                function drawHilbert(x, y, s) {
                    s += 'L ' + (x + dx2) + ' ' + (y + dy + dy2) + ' ';
                    s += 'L ' + (x + dx2) + ' ' + (y + dy2) + ' ';
                    s += 'L ' + (x + dx + dx2) + ' ' + (y + dy2) + ' ';
                    s += 'L ' + (x + dx + dx2) + ' ' + (y + dy + dy2) + ' ';
                    return s;
                }
                

                drawGrid();
                drawHilbertRoot();
                //drawZOrderRoot();

//                var circle = paper.circle(100, 100, 80);
//                for (var i = 0; i < 5; i += 1) {
//                    var multiplier = i * 5;
//                    paper.circle(250 + (2 * multiplier), 100 + multiplier, 50 - multiplier);
//                    var rectangle = paper.rect(200, 200, 250, 100);
//                    var ellipse = paper.ellipse(200, 400, 100, 50);
//                }
            }
        </script>
    </head>  
    <body>  
        <div id="canvas_container"></div>  
    </body>  
</html>  